<template>
  <div class="container">
    <div class="toplun">
      <el-carousel :interval="4000" type="card" height="20rem" class="lunbotu">
        <el-carousel-item v-for="(item, index) in $store.state.newnews" :key="index">
          <img @click="tonewsdetail(index)" :src="item.news_cover" class="zhiyuan-img"/>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="top-card">
      <el-card class="box-card" v-for="(item, index) in $store.state.gonggaolan" :key="index">
        <div slot="header" class="clearfix">
          <span>{{ item.biaoti }}</span>
        </div>
        <div class="text item">{{ item.neirong }}</div>
      </el-card>
    </div>

    <div class="biaoyu">
      <h2>目 前 正 在 进 行 的 志 愿 活 动</h2>
      <p>点 击 下 面 的 按 钮 即 可 进 入 详 情 页 面 参 与</p>
    </div>

    <div class="centercard">
      <div class="center-card" v-for="(item, index) in $store.state.newactivity.slice(0, 3)" :key="index">
        <div class="top-img"><img @click="toactivitydetail(index)" :src="item.activity_cover"/></div>
        <div class="other">
          <div class="center-text">
            <!-- <div class="top-tiao"><el-progress :text-inside="true" :stroke-width="15" :percentage=Math.floor((item.activity_participator_num/item.activity_people_max_num)*100) status="warning"></el-progress></div> -->
            <div class="center-shuzi">
              <div class="shuzi-left">
                <span>已报名人数:</span>
                <p>{{ item.activity_participator_num }}</p>
              </div>
              <div class="shuzi-right">
                <span>需求人数:</span>
                <p>{{ item.activity_people_max_num }}</p>
              </div>
            </div>
          </div>
          <div class="buttom-text" @click="toactivitydetail(index)">
            <h2>{{ item.activity_name }}</h2>
            <div class="inputtime">
              <i class="el-icon-time"></i>
              <span>{{ item.activity_begin_time }}</span>
              <span>-</span>
              <span>{{ item.activity_end_time }}</span>
            </div>
            <div class="jieshaotext">
              <p>{{ item.activity_detail }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="biaoyu">
      <h2>志 愿 之 星</h2>
      <p>以下人士皆为为志愿活动做出优秀贡献之人</p>
    </div>
    <div class="center-buttomcontainer">
      <div class="card" v-for="(item, index) in $store.state.OutstandingVolunteer" :key="index">
        <div class="imgBx"><img :src="item.imageurl" alt=""/></div>
        <div class="content">
          <h3>{{ item.people }}</h3>
          <span>志愿学时</span>
          <p>{{ item.volunteertime }}</p>
        </div>
      </div>
    </div>
    <div class="box5">
      <div class="biaoyu">
        <h2>留 言 板</h2>
        <t-button style="margin-top: 1.5rem" @click="toComment" variant="dashed" ghost shape="round">
          点击留言
        </t-button>
      </div>

      <el-dialog title="在这里留下你对于志愿的意见或者看法吧！" :visible.sync="dialogFormVisible">
        <el-input v-model="comment" placeholder="留下你想说的话吧！" clearable>
        </el-input>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="sendComment">确 定</el-button>
        </div>
      </el-dialog>
      <div class="block">
        <el-carousel trigger="click" height="16rem" v-if="$store.state.test.length">
          <el-carousel-item v-for="(item, index) in $store.state.test" :key="index">
            <div class="swiper-item">
              <img :src="$store.state.publicStaticPath + item.sender_info.avatar"/>
              <blockquote>{{ item.leave_word_content }}</blockquote>
              <span>{{ '---' + item.sender_info.nick_name + '---' }}</span>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

    <div class="footer">
      <div class="news">
        <h3>志愿资讯</h3>
        <ul class="probootstrap-news" v-for="(item, index) in $store.state.newnews.slice(0, 2)" :key="index">
          <li>
            <span class="probootstrap-date">{{ item.news_create_time }}</span>
            <h3>
              <a @click="tonewsdetail(index)">{{ item.news_name }}</a>
            </h3>
            <p>{{ item.news_detail }}</p>
            <p>
							<span>
								<a href=""><i></i></a>
								<a href=""><i></i></a>
							</span>
            </p>
          </li>
        </ul>
        <el-row>
          <el-button type="success" @click="tonews">查看更多</el-button>
        </el-row>
      </div>
      <div class="aboutus">
        <h3>关于我们</h3>
        <p>
          <img
              class="img-responsive"
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimages.zb580.tv%2Fupload%2F201804%2F16%2F201804161454477743.jpg&refer=http%3A%2F%2Fimages.zb580.tv&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637917187&t=e0521831a73f996375f0df98fc23183d"
          />
        </p>
        <p>
          志愿吧（ZHIYUANBA）是一家极具潜力且非常年轻充满朝气的志愿公司。公司于2021年在10-452正式成立。目前第一款作品《志愿吧》已于2021年5月上线。未来，志愿吧仍然会继续倾注创作热情，致力于制作出充满挑战乐趣与拥有艺术价值的网站。
          我们在构建完整且独一无二的“世界”道路上继续前进，希望热爱志愿与前卫创作的你一起加入！
        </p>
        <el-row>
          <el-button type="success" @click="toaboutus">点击进入团队主页</el-button>
        </el-row>
      </div>
      <div class="gallery">
        <h3>志愿时刻</h3>
        <div class="footerblock">
          <el-carousel trigger="click" height="16rem">
            <el-carousel-item v-for="(item, index) in $store.state.indexnews" :key="index">
              <div class="swiper-item"><img :src="item.imageurl"/></div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {request} from '../api/axios.js';

export default {
  name: 'index',
  data() {
    return {
      comment: '',
      dialogFormVisible: false,
    };
  },
  created() {
    this.getnewactivity();
    this.getnewnews();
    this.getLeaveWords();
  },
  methods: {
    toComment() {
      this.dialogFormVisible = true
    },
    sendComment() {
      this.dialogFormVisible = false
      request({
        url: '/v1/users/createleaveword',
        method: 'post',
        data: {
          sender: this.$store.state.userInfo.userName,
          leave_word_content: this.comment
        }
      }).then((res) =>{
        if (res.data.code === 200) {
          request({
            url: '/v1/users/indexleaveword'
          }).then(res =>{
            this.$store.state.test = res.data.data
          })
        }
      })
    },
    getLeaveWords() {
      request({
        url: '/v1/users/indexleaveword'
      }).then(res =>{
        this.$store.state.test = res.data.data
        console.log(this.$store.state.test);
      })
    },
    getnewnews() {
      request({
        url: '/v1/news/indexrecommend'
      }).then(res => {
        console.log(res);
        this.$store.state.newnews = res.data.data;
        res.data.data.map(item => {
          item.news_cover = this.$store.state.publicStaticPath + item.news_cover;
        });
        console.log(this.$store.state.newnews);
      });
    },
    getnewactivity() {
      request({
        url: '/v1/activities/indexrecommend'
      }).then(res => {
        console.log(res);
        this.$store.state.newactivity = res.data.data;
        res.data.data.map(item => {
          item.activity_cover = this.$store.state.publicStaticPath + item.activity_cover;
        });
      });
    },
    tonewsdetail(index) {
      let nowid = this.$store.state.newnews[index].id;
      this.$store.dispatch('tonewsdetail', index);
      this.$router.push({
        path: '/newsdetail',
        query: {index: nowid}
      });
    },
    toactivitydetail(index) {
      let nowid = this.$store.state.newactivity[index].id;
      this.$store.dispatch('toActivityDetail', nowid);
      this.$router.push({
        path: '/activitydetail',
      });
    },
    toaboutus() {
      this.$router.push({
        path: '/aboutus'
      });
    },
    tonews() {
      this.$router.push({
        path: '/news'
      });
    }
  }
};
</script>

<style>
.container {
  margin: auto;
  width: 100%;
}

.el-carousel {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.text {
  font-size: 16px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}

.top-card {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0 1rem 0; /* 第一个是上 ,第二个是右，第三个是下，第四个是左*/
}

.box-card {
  width: 25rem;
  margin: 0 1rem 0 1rem;
}

.centercard {
  justify-content: center;
  display: flex;
  padding: 0.5rem 0 1rem 0; /* 第一个是上 ,第二个是右，第三个是下，第四个是左*/
}

.center-card {
  width: 25rem;
  margin: 0 1rem 0 1rem;
}

.zhiyuan-img {
  width: 100%;
}

.top-img {
  cursor: pointer;
}

.top-img img {
  height: 15rem;
  width: 90%;
  margin-left: 1rem;
}

.other {
  width: 22rem;
  margin: auto;
}

.center-shuzi {
  display: flex;
  justify-content: space-between;
}

.shuzi-left span {
  font-size: 12px;
  color: #b3b2b2;
}

.shuzi-left p {
  font-size: 24px;
  color: #01c632;
}

.shuzi-right span {
  font-size: 12px;
  color: #b3b2b2;
}

.shuzi-right p {
  font-size: 24px;
  color: #01c632;
}

.buttom-text {
  margin: 0.5rem 0 0 0;
}

.inputtime {
  opacity: 0.5;
  margin: 0.5rem 0 0.5rem 0;
}

.inputtime span {
  padding-left: 1rem;
}

.jieshaotext {
  color: #637381;
  line-height: 26px;
  font-size: 16px;
  font-weight: 300;
  font-family: Lato, Arial, sans-serif;
  margin-bottom: 1rem;
}

.biaoyu {
  padding: 2rem 0 2rem 0;
  text-align: center;
}

.center-buttomcontainer {
  position: relative;
  height: 30rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: -5rem;
  margin-bottom: -5rem;
}

.center-buttomcontainer .card {
  position: relative;
  max-width: 18rem;
  height: 15rem;
  background: #fff;
  margin: 0 1.5rem;
  padding: 1.4rem 0.9rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.2rem 2rem rgba(0, 0, 0, 0.5);
  transition: 0.3s ease-in-out;
}

.center-buttomcontainer .card:hover {
  height: 17rem;
}

.center-buttomcontainer .card .imgBx {
  position: relative;
  width: 200px;
  height: 150px;
  z-index: 1;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.center-buttomcontainer .card .imgBx img {
  width: 200px;
  height: 150px;
  max-width: 100%;
  border-radius: 4px;
}

.center-buttomcontainer .card .content {
  position: relative;
  padding: 10px 15px;
  text-align: center;
  color: #111;
  visibility: hidden;
  opacity: 0;
  transition: 0.3s ease-in-out;
}

.center-buttomcontainer .card:hover .content {
  visibility: visible;
  opacity: 1;
  transition-delay: 0.3s;
}

.center-buttomcontainer .card .content span {
  font-size: 12px;
  color: #b3b2b2;
}

.center-buttomcontainer .card .content p {
  font-size: 24px;
  color: #01c632;
}

.box5 .block .el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.box5 {
  background-color: lightskyblue;
}

.block {
  width: 50rem;
  height: 20rem;
  margin: auto;
  padding: 0.5rem 0 1rem 0;
}

.block .swiper-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.block img {
  display: block;
  margin: 1rem 0;
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
}

.block blockquote {
  margin: 1rem 0;
  width: 40rem;
  text-align: center;
  font-weight: 300;
}

.block span {
  font-weight: 700;
}

.el-carousel__item:nth-child(n) {
  background-color: white;
}

.footer {
  justify-content: center;
  display: flex;
  margin: 5rem 5rem 5rem 5rem; /* 第一个是上 ,第二个是右，第三个是下，第四个是左*/
}

.news {
  width: 15rem;
  margin-right: 2rem;
}

.news h3 {
  color: #000;
  line-height: 1.5;
  font-family: Montserrat, Arial, sans-serif;
  margin: 0 0 30px;
}

.probootstrap-news li {
  list-style: none;
  display: block;
  text-align: -webkit-match-parent;
}

.probootstrap-news li p {
  margin: 0 0 10px;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  list-style: none;
  color: #637381;
  line-height: 26px;
  font-size: 16px;
  font-weight: 300;
  font-family: Lato, Arial, sans-serif;
}

.probootstrap-news li a {
  color: #fdbe34;
  text-decoration: none;
  transition: 0.3s all;
}

.probootstrap-news li a:hover {
  color: #333;
  text-decoration: none;
}

.probootstrap-news li .probootstrap-date {
  color: #ccc;
  text-transform: uppercase;
}

.aboutus {
  width: 40rem;
}

.aboutus p {
  width: 35rem;
  margin: 0 0 10px;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  list-style: none;
  color: #637381;
  line-height: 26px;
  font-size: 16px;
  font-weight: 300;
  font-family: Lato, Arial, sans-serif;
}

.img-responsive {
  margin: 1rem 2rem 2rem 0;
  width: 35rem;
  height: 10rem;
}

.footerblock {
  height: 20rem;
  width: 15rem;
}

.gallery {
}
</style>
